<template>
  <div class="whiteTea">
    <div class="left">
      <div>
        <img src="../assets/product-red/red1.jpg" alt="" />
      </div>
      <div>
        <p>
          <span>品&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;牌:</span
          ><span> 一亩茶园</span>
        </p>
        <p>
          <span>名&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;称:</span
          ><span> 一亩茶园资溪有机红茶100g礼盒装</span>
        </p>
        <p>
          <span>包&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;装:</span
          ><span> 礼盒装</span>
        </p>
        <p><span>茶叶等级:</span><span> 三级</span></p>
        <p><span>商品编号:</span><span> 50803551038</span></p>
        <p><span>茶叶产地:</span><span> 江西 抚州 资溪</span></p>
        <p><span>商品毛重:</span><span> 210.00g</span></p>
      </div>
    </div>
    <div class="right">
      <el-carousel
        :interval="4000"
        type="card"
        height="500px"
        class="swipper-box"
      >
        <el-carousel-item>
          <img
            src="../assets/product-red/red5.jpg"
            alt=""
            class="swipper-img"
          />
        </el-carousel-item>
        <el-carousel-item>
          <img
            src="../assets/product-red/red2.jpg"
            alt=""
            class="swipper-img"
          />
        </el-carousel-item>
        <el-carousel-item>
          <img
            src="../assets/product-red/red3.jpg"
            alt=""
            class="swipper-img"
          />
        </el-carousel-item>
        <el-carousel-item>
          <img
            src="../assets/product-red/red4.jpg"
            alt=""
            class="swipper-img"
          />
        </el-carousel-item>
      </el-carousel>
    </div>
  </div>
</template>

<script>
export default {
  //import引入的组件
  components: {},
  data() {
    return {};
  },
  //方法集合
  methods: {
    // 详情展示
  },
  //生命周期 - 挂载完成（可以访问DOM元素）
  mounted() {},
};
</script>


<style lang="less" scoped>
.whiteTea {
  display: flex;
  box-sizing: border-box;
  .left {
    width: 40%;
    height: 80vh;

    display: flex;
    align-items: center;
    justify-content: center;
    & > div:nth-of-type(2) {
      p {
        font-size: 16px;
        display: flex;
        justify-content: flex-start;
        & > span {
          display: inline-block;
        }
        & > span:nth-of-type(1) {
          width: 100px;
          font-weight: 600;
          text-align: justify;
        }
      }
    }
    img {
      width: 380px;
      height: 380px;
      margin-right: 20px;
      // border: 1px solid red;
    }
  }
  .right {
    width: 60%;
    display: flex;
    justify-content: center;
    align-items: center;
    .swipper-box {
      width: 1000px;
      height: 60vh;
      .swipper-img {
        height: 550px;
      }
    }
  }
}
</style>
